<template>
  <div class="FileUploader">
    <uploader
      :options="options"
      :autoStart="false"
      :file-status-text="fileStatusText"
      @file-success="fileSuccess"
      @file-added="fileAdded"
      @file-progress="fileProgress"
      @file-error="fileError"
      @file-removed="fileRemove"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-btn :single="true" :attrs="attrs">点击上传</uploader-btn>
      <uploader-list></uploader-list>
    </uploader>
  </div>
</template>

<script>
export default {
  name: "FileUploader",
  data() {
    return {
      // 文件限制
      FileLimit: {
        FileMaxSize: 600, // 允许上传的大小 单位(M)
        FileFormat: ["mp4"], // 允许上传的格式
        FileUnit: "M", // 单位
      },
      // 配置参数
      options: {
        // 可通过 https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js 示例启动服务
        // 也就是根目录下的samples文件夹，启动下面项目的服务即可
        target: "//localhost:3000/upload", // 上传地址
        // 为每个块向服务器发出 GET 请求，以查看它是否已经存在。如果在服务器端实施，即使在浏览器崩溃甚至计算机重新启动后，这也将允许上传恢复。（默认值：true）
        testChunks: false,
        // 启用单个文件上传。上传一个文件后，第二个文件将超过现有文件，第一个文件将被取消。
        singleFile: true,
      },
      //上传状态
      fileStatusText: {
        success: "上传成功！",
        error: "出错了！",
        uploading: "上传中...",
        paused: "等待中...",
        waiting: "等待中...",
      },
      // uploader-btn 额外参数配置
      attrs: {
        accept: "*", //允许上传的格式
      },
    };
  },
  methods: {
    // 添加一个文件时触发
    async fileAdded(file) {
      var FileLimit = this.FileLimit;
      // 文件格式判断
      const isFormat = this.checkExtensions(file.name, FileLimit.FileFormat);
      if (!isFormat) {
        file.ignored = true; // 过滤文件
        file.cancel(); // 停止上传
        return false;
      }
      // 文件大小判断
      const isSize = this.checkSize(file.size);
      if (!isSize) {
        file.ignored = true; // 过滤文件
        file.cancel(); // 停止上传
        return false;
      }
    },
    // 检查文件大小 参数单位为字节
    checkSize(fileSize) {
      var FileLimit = this.FileLimit;
      var isSize = fileSize / 1024 / 1024 < FileLimit.FileMaxSize; // 单位(M)
      if (!isSize) {
        this.$Message.warning(
          " 文件大小不能大于" + FileLimit.FileMaxSize + FileLimit.FileUnit + "!"
        );
        return false;
      }
      return true;
    },
    // extensions 允许上传的格式
    checkExtensions(fileName, extensions) {
      var format = fileName.split(".").pop().toLowerCase(); // 用户上传的文件格式
      // 把允许上传文件格式的数组转为字符串
      var s = extensions.join(",");
      var exp = new RegExp(format);
      if (!exp.test(extensions)) {
        this.$Message.warning("请上传 " + s + " 的格式!");
        return false;
      }
      return true;
    },

    // 文件上传中触发
    fileProgress(rootFile, file, chunk) {
      // 判断上传是否在上传
      if (file.isUploading()) {
        this.isUploadOk = false; // 禁止上传
      } else {
        this.isUploadOk = true; // 允许上传
      }
    },
    // 上传错误触发
    fileError(rootFile, file, response, chunk) {
      this.$Message({
        message: "上传失败,请重新上传!",
        type: "error",
      });
    },
    // 视频移除
    fileRemove(file) {
      console.log("视频移除", file);
    },
    // 上传成功
    fileSuccess(rootFile, file, response, chunk) {
      console.log("上传成功", rootFile, file, response, chunk);
    },
  },
};
</script>
<style lang="scss" scoped>
.FileUploader {
  display: flex;
  align-items: center;
  justify-content: center;
  .uploader {
    width: 600px;
  }
}
</style>
